<template>
  <!--全屏容器-->
  <dv-full-screen-container>
    <!--全局容器-->
    <div class="wrap-container">
      <!--顶部容器-->
      <div class="top-container">
        <!--左侧当前时间-->
        <CurrentTime />
        <!--中心标题-->
        <Title />
        <!--当前地址-->
        <CurrentAddress />
      </div>
      <!--内容区容器-->
      <div class="main-container">
        <!--左侧区域-->
        <div class="main-left-container">
          <Border>
            <div class="border-in">
              <dv-active-ring-chart
                :config="pageOption.sectorProportion"
                style="width: 300px; height: 300px"
              />
            </div>
          </Border>
          <Border>
            <div class="border-in">
              <dv-capsule-chart
                :config="pageOption.capsuleDiagram"
                style="width: 90%; height: 90%"
              />
            </div>
          </Border>
          <Border>
            <Echarts :options="pageOption.echartsData1" />
          </Border>
        </div>
        <!--中心区域-->
        <div class="main-centre-container">
          <Echarts :options="pageOption.echartsMapData" />
        </div>
        <!--右侧区域-->
        <div class="main-right-container">
          <Border>
            <div class="border-in">
              <dv-scroll-ranking-board
                :config="pageOption.RankedRotation"
                style="width: 90%; height: 85%"
              />
            </div>
          </Border>
          <Border></Border>
          <Border></Border>
        </div>
      </div>
    </div>
  </dv-full-screen-container>
</template>
<script setup lang="ts" name="DataAnalysis">
import CurrentTime from './currentTime/index.vue';
import Title from './title/index.vue';
import CurrentAddress from './currentAddress/index.vue';
import Border from './border/index.vue';
import { ref } from 'vue';
//页面配置项
const pageOption = ref({
  //左上1边框数据
  sectorProportion: {
    lineWidth: 24,
    digitalFlopStyle: {
      fill: 'pink',
    },
    data: [
      {
        name: '北京',
        value: 98,
      },
      {
        name: '天津',
        value: 150,
      },
      {
        name: '河北',
        value: 62,
      },
      {
        name: '河南',
        value: 54,
      },
    ],
  },
  //左2边框数据
  capsuleDiagram: {
    data: [
      {
        name: '南阳',
        value: 167,
      },
      {
        name: '周口',
        value: 123,
      },
      {
        name: '漯河',
        value: 98,
      },
      {
        name: '郑州',
        value: 75,
      },
      {
        name: '西峡',
        value: 66,
      },
    ],
    colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
    unit: '万',
  },
  //左3边框数据
  echartsData1: {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
      type: 'value',
      splitLine: {
        show: false, // 设置为false即可隐藏纵向刻度线
      },
    },
    series: [
      {
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        showBackground: true,
        itemStyle: {
          color: '#225673', // 设置柱的颜色为蓝色
        },
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)',
        },
      },
    ],
  },
  //中心地图区域
  echartsMapData: {
    // 提示浮窗样式
    tooltip: {
      show: true,
      trigger: 'item',
      alwaysShowContent: false,
      backgroundColor: '#0C121C',
      borderColor: 'rgba(0, 0, 0, 0.16);',
      hideDelay: 100,
      triggerOn: 'mousemove',
      enterable: true,
      textStyle: {
        color: '#DADADA',
        fontSize: '12',
        width: 20,
        height: 30,
        overflow: 'break',
      },
      showDelay: 100,
    },
    // 地图配置
    geo: {
      map: 'china',
      label: {
        // 通常状态下的样式
        normal: {
          show: true,
          textStyle: {
            color: '#fff',
          },
        },
        // 鼠标放上去的样式
        emphasis: {
          textStyle: {
            color: '#fff',
          },
        },
      },
      // 地图区域的样式设置
      itemStyle: {
        normal: {
          borderColor: 'rgba(147, 235, 248, 1)',
          borderWidth: 1,
          areaColor: {
            type: 'radial',
            x: 0.5,
            y: 0.5,
            r: 0.8,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(147, 235, 248, 0)', // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'rgba(147, 235, 248, .2)', // 100% 处的颜色
              },
            ],
            globalCoord: false, // 缺省为 false
          },
          shadowColor: 'rgba(128, 217, 248, 1)',
          shadowOffsetX: -2,
          shadowOffsetY: 2,
          shadowBlur: 10,
        },
        // 鼠标放上去高亮的样式
        emphasis: {
          areaColor: '#389BB7',
          borderWidth: 0,
        },
      },
    },
  },
  //右上1边框数据
  RankedRotation: {
    data: [
      {
        name: '东城区',
        value: 80,
      },
      {
        name: '西城区',
        value: 120,
      },
      {
        name: '海淀区',
        value: 78,
      },
      {
        name: '朝阳区',
        value: 66,
      },
      {
        name: '丰台区',
        value: 80,
      },
      {
        name: '门头沟区',
        value: 45,
      },
      {
        name: '石景山区',
        value: 29,
      },
      {
        name: '房山区',
        value: 29,
      },
      {
        name: '通州区',
        value: 29,
      },
      {
        name: '昌平区',
        value: 29,
      },
    ],
    unit: '万',
  },
});
</script>
<style scoped lang="scss">
.wrap-container {
  width: 100%;
  height: 100%;
  background-image: url('@/assets/image/dataAnalysis/background.png');
  background-size: cover;
  background-repeat: no-repeat;
}
.top-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 10%;
}
.main-container {
  display: flex;
  padding: 0 4%;
  width: 100%;
  height: 90%;
}
.main-left-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 25%;
  height: 88%;
}
.main-centre-container {
  width: 50%;
  height: 88%;
}
.main-right-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 25%;
  height: 88%;
}
.border-in {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
</style>
